<template>
    <div>
       <form action="/">
        <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
        />
        </form>
        <ul v-if="value">
            <li v-for="data in computedList" :key="data.cinemaId">
               <div class="left">
                   <div class="cinema_name"> {{data.name}}</div>
                   <div class="cinema_address">{{data.address}} </div>
               </div>
               <div class="right">
                    <div style="color:red;">￥{{data.lowPrice/100}}起</div>
                    <div>距离未知</div>
               </div>
            </li>
        </ul>
    </div>
</template>
<script>
import { Toast } from 'vant'
import isShow from '@/util/mixinshow'
export default {
  mixins: [isShow],
  data () {
    return {
      value: ''
    }
  },
  computed: {
    computedList () {
      return this.$store.state.cinemaList.filter(item => item.name.toUpperCase()
        .includes(this.value.toUpperCase()) || item.address.toUpperCase()
        .includes(this.value.toUpperCase()))
    }
  },
  methods: {
    onSearch (val) {
      Toast(val)
    },
    onCancel () {
    //   Toast('取消')
      this.$router.back()
    }
  },
  //   destroyed () {
  //     this.$store.commit('show')
  //   },
  mounted () {
    // this.$store.commit('hide')
    if (this.$store.state.cinemaList.length === 0) {
      this.$store.dispatch('getCinemaData', this.$store.state.cityId)
    } else {
      console.log('缓冲')
    }
  }
}
</script>
<style lang="scss" scoped>
ul{
        li{
            padding: .9375rem;
            display: flex;
            justify-content: space-between;

            .left{
                width: 14.375rem;
                .cinema_name{
                    font-size: .9375rem;
                    color: #191a1b;
                }
                .cinema_address{
                    color: #797d82;
                    font-size: 12px;
                    margin-top: 5px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
</style>
